<template>
  <div class="container-big">
    <div class="head-big">
      <div class="head-left">
        <el-dropdown style="margin-right: 10px">
          <el-button type="primary" plain size="small">
            <i class="el-icon-plus"></i>添加黑名单
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="handerAdd">从客户添加</el-dropdown-item>
            <el-dropdown-item @click.native="handerAddBlackByGroup">从客户群添加</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button type="primary" size="small" plain @click="handerAddEnterprise">根据企业自动添加</el-button>
      </div>
      <div class="head-right">
        <el-dropdown>
          <el-button plain size="small">
            <i class="el-icon-delete"></i>清理黑名单
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="handleNumberDelete">清空本页</el-dropdown-item>
            <el-dropdown-item @click.native="handleNumberDelete">清空全部</el-dropdown-item>

          </el-dropdown-menu>
        </el-dropdown>
        <el-button plain size="small" @click="handerClear"><i class="el-icon-setting"></i>黑名单自动清理设置</el-button>
        <el-button plain size="small" @click="handleChatBlack"><i class="el-icon-setting"></i>踢人话术设置</el-button>
      </div>
    </div>
    <div class="formGroup">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="130px" class="">
        <el-form-item prop="userName3">
          <div class="right-big">
            <span>流失时间：</span>
            <el-date-picker
              v-model="dateRange1"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="-"
              start-placeholder="开始时间"
              size="small"
              end-placeholder="结束时间"
              @change="handleQuery"
            ></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item prop="userName3">
          <div class="right-big">
            <span>触发时间：</span>
            <el-date-picker
              v-model="dateRange1"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="-"
              size="small"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="handleQuery"
            ></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item prop="userName2">
          <div class="search">
            <el-input v-model="queryParams.userName1" placeholder="搜索关键词" clearable/>
            <el-button icon="el-icon-search" size="small" @click="handleQuery"></el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <ul class="nameList">
      <li>
        <img src="@/assets/images/profile.jpg"/>
        <div class="name">@微信1111</div>
        <div class="item">7881301495263342</div>
        <div class="item">2024-03-19 13:30 手动添加<el-tooltip class="item" effect="dark" content="黑白名单、在线聊天、客服分发、群成员去重、客户管理等功能点中手动确认添加的。" placement="top-start">
          <svg-icon icon-class="iquestion" style="margin-left: 5px"></svg-icon>
        </el-tooltip></div>
        <div class="item">2024-03-19 13:30 最后触发<span @click="getKickRecords">更多</span></div>
        <el-popover
          placement="top"
          width="166"
          trigger="click"
          popper-class="popover-big"
          v-model="visible">
          <div class="popover-title"><i class="el-icon-warning"></i>确定移出黑名单？</div>
          <div class="popover-btn">
            <el-button size="mini" type="text" @click="visible = false">取消</el-button>
            <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
          </div>
          <i slot="reference" class="el-icon-more"></i>
        </el-popover>
      </li>
    </ul>
    <!--    从客户添加-->
    <addBlackByUser v-if="showAddBlackByUser" :visableIf.sync="showAddBlackByUser"></addBlackByUser>
    <!--    从客户群添加-->
    <addBlackByGroup v-if="showAddBlackByGroup" :visableIf.sync="showAddBlackByGroup"></addBlackByGroup>
    <!--    根据企业自动添加-->
    <addEnterpriseBlack v-if="showAddEnterpriseBlack" :visableIf.sync="showAddEnterpriseBlack"></addEnterpriseBlack>
    <!--    设置自动清理-->
    <setClearBlack v-if="showSetClearBlack" :visableIf.sync="showSetClearBlack"></setClearBlack>
    <!--    黑名单踢人话术设置-->
    <setChatBlack v-if="showSetChatBlack" :visableIf.sync="showSetChatBlack"></setChatBlack>
<!--    黑名单触发执行踢人记录-->
    <kickRecords  v-if="showKickRecords" :visableIf.sync="showKickRecords"></kickRecords>

  </div>
</template>

<script>
import {listUser, delUser,} from "@/api/system/user";

export default {
  name: "whiteList",
  components: {
    'addBlackByUser': () => import('./addBlackByUser.vue'),//从客户添加
    'addBlackByGroup': () => import('./addBlackByGroup.vue'),//从客户群添加
    'addEnterpriseBlack': () => import('./addEnterpriseBlack.vue'),//添加企业黑名单
    'setClearBlack': () => import('./setClearBlack.vue'),//自动清理
    'setChatBlack': () => import('./setChatBlack.vue'),//黑名单话术设置
    'kickRecords':()=> import('./kickRecords.vue'),//黑名单触发执行踢人记录
  },
  data() {
    return {
      showKickRecords:false,
      showAddBlackByUser: false,//按客户添加
      showAddBlackByGroup: false,//按客户群查找
      showAddEnterpriseBlack: false,//企业自动添加
      showSetClearBlack: false,//应用
      showSetChatBlack: false,//
      active: 0,
      visible: false,
      dateRange1: [],//添加时间
      dateRange2: [],//触发时间
      dialogType: 'add',
      showExportPage: false,//导出
      tableHeight: 600,
      tableDataList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        id: null,//用户id
        userName1: null,

      },
      total: 8, // 表格的总条数
    };
  },
  created() {
    // this.getList();
    this.tableDataList = [];
    for (let i = 0; i < 10; i++) {
      let obj = {
        name: '小红',
        label1: '18207418337',
        label2: '18207418337',
        label3: '18207418337',
        label4: '18207418337',
      }
      this.tableDataList.push(obj);
    }
  },
  methods: {
    getKickRecords(){
      this.showKickRecords=true;
    },
    handerClear() {
      console.log('点击');
      this.showSetClearBlack = true;
    },
    handerAddEnterprise() {
      this.showAddEnterpriseBlack = true;
    },
    handerAdd() {
      this.showAddBlackByUser = true;
    },
    handerAddBlackByGroup() {
      //按客户群查找
      this.showAddBlackByGroup = true;
    },
    handleChatBlack() {
      this.showSetChatBlack = true;
    },

    showLabel() {
      this.showSelectLabelPage = true;
    },
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.tableDataList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.queryParams.deptId = undefined;
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(val) {
      this.multipleSelection = [];
      if (val && val.length > 0) {
        val.forEach((item) => {
          this.multipleSelection.push(item.id);
        })
        console.log('multipleSelection', this.multipleSelection);
      }
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      //删除
      // const userIds = row.userId || this.ids;
      // this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
      //   return delUser(userIds);
      // }).then(() => {
      //   this.getList();
      //   this.$modal.msgSuccess("删除成功");
      // }).catch(() => {
      // });
      this.$msgBox.showMsgBox({
        title: "是否确认删除？",
        content: "该企微号正在执行服务，删除将会使该号从操作中释放，导致部分功能无法正常使用，请谨慎选择。*如该号已加入在线聊天，成功删除后，聊天记录会被一并删除，重新登录后无法恢复。",
      })
        .then(async (val) => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleNumberDelete() {
      this.$modal.confirm('确认清空本页黑名单？').then(function () {
        return delUser(userIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });

    },

  }
};
</script>
<style lang="scss" scoped>
.tooltipContent {
  .h5 {
    font-size: 12px;
  }

  .list-big {
    display: flex;
    flex-wrap: wrap;

    span {
      height: 25px;
      display: flex;
      padding: 0px 5px;
      margin: 4px 4px 4px 0;
      color: rgba(0, 0, 0, .65);
      border: 1px dashed #eee;
    }
  }
}

.keywordList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  .tips {
    color: #2d8cf0;
  }
}

.head-big {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  padding-bottom: 0px;
}

.container-big {
  display: flex;
  height: calc(100vh - 100px);
  margin: 12px;
  background: #fff;
  flex-direction: column;

  .container-left {
    width: 278px;
    background: #fff;
    margin-right: 12px;
    padding: 20px;
    position: relative;

    .addIcon {
      position: absolute;
      right: 10px;
      top: 26px;

      i {
        margin: 0px 5px;
        font-size: 16px;
        font-weight: bold;
      }
    }

    .line {
      margin: 10px -20px;
      height: 1px;
      background: #eee;

    }

    .tablist {
      height: 50px;
      display: flex;
      justify-items: center;
      border-left: none;
      border-radius: 4px 0 0 4px;
      height: 32px;
      margin-bottom: 12px;
      position: relative;

      &:after {
        content: '';
        position: absolute;
        left: -40px;
        right: -40px;
        bottom: 0px;

      }

      li {
        display: flex;
        align-items: center;
        justify-items: center;
        border-left: 1px solid #e9e9e9;
        border-radius: 4px 0 0 4px;
        font-weight: bold;
        padding: 0px 10px;
        font-size: 14px;
        color: rgba(0, 0, 0, .65);
        border: 1px solid #eee;
        cursor: pointer;

        &.active {
          border-color: #3070ff;
          color: #3070ff;
        }
      }
    }
  }

  .container-right {
    flex: 1;
    background: #fff;

  }
}

.formGroup {
  width: 100%;
  padding: 20px;

  .el-form {
    background: #fff;
    border-radius: 8px;
    margin-top: -1px;

    .el-button {
      margin-right: 10px;
    }

    .el-form-item {
      margin-bottom: 0px;

      .right-big {
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        padding-left: 11px;

        > span {
          color: #777;
          width: 89px;
          display: inline-block;
          white-space: nowrap;
        }

        .el-select {
          width: 138px;

          ::v-deep .el-input__inner {
            border: none;
          }
        }

        .el-input {
          width: 138px;

          ::v-deep .el-input__inner {
            border: none;
          }
        }

        ::v-deep .el-date-editor {
          border: none;
        }
      }

    }
  }
}

.nameList {
  display: flex;
  flex-wrap: wrap;
  margin: 0px 20px;

  li {
    list-style: none;
    position: relative;
    padding: 12px;
    height: 110px;
    background-color: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    width: calc(25% - 20px);
    padding-left: 60px;
    margin: 0px 10px;
    margin-bottom: 20px;

    img {
      width: 40px;
      height: 40px;
      border-radius: 5px;
      position: absolute;
      left: 12px;
      top: 12px;
    }

    .item {
      font-size: 14px;
      margin-bottom: 1px;
      color: #999;
      line-height: unset;
      span {
        color: #3070ff;
        margin-left: 10px;
        cursor: pointer;
      }
    }

    .name {
      color: #19af19;
      font-size: 12px;
      margin-bottom: 5px;
    }

    .el-icon-more {
      position: absolute;
      right: 12px;
      color: #999;
      top: 12px;
      cursor: pointer;

    }

  }
}

.popover-big {
  .popover-title {
    i {
      font-size: 16px;
      color: #f8ac59;
      margin-right: 10px;
    }
  }

  .popover-btn {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }
}

.head-right {
  .el-dropdown {
    margin-right: 10px;
  }

  .el-button {
    i {
      margin-right: 5px;
    }
  }
}

.search {
  display: flex;
  ::v-deep.el-input__inner {
    border-right: none !important;
    border-radius: 4px 0px 0px 0px;
  }
  ::v-deep .el-button--default {
    border-radius: 0px 4px 4px 0px;
    padding: 0px 10px;
  }
}
</style>
